<template>
  <view class="rank-box">
    <view class="rank-title u-flex-between u-flex-y-center">
      <view>
        <text>房源</text>
        <text>排行榜</text>
      </view>
      <view class="house-more" @click="$u.route('/pages/index/houseRank')">
        <text>查看更多</text>
        <image src="@/static/images/01_kug.png" mode=""></image>
      </view>
      <image src="@/static/images/01_m.png" mode=""></image>
    </view>
    <swiper :duration="500" style="height: 600rpx;">
      <swiper-item v-for="(item,index) in rankList" :key="item.id">
        <view>
          <view class="rank-desc">{{item.title}}</view>
          <block v-for="(house,house_index) in item.house_data" :key="house_index">
            <houseItem :item="house">
              <template #imgLeft>
                <image src="@/static/images/01_bb.png" v-if="house_index == 0" class="rank-icon" mode=""></image>
                <image src="@/static/images/01_nn.png" v-if="house_index == 1" class="rank-icon" mode=""></image>
                <image src="@/static/images/01_mm.png" v-if="house_index == 2" class="rank-icon" mode=""></image>
              </template>
            </houseItem>
          </block>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
  import houseItem from '@/components/house-item/house-item.vue';
  const props = defineProps({
    rankList: {
      type: Array,
      default: () => []
    }
  })
</script>

<style scoped lang="scss">
  .rank-box {
    padding: 16rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-top: 20rpx;

    .rank-title {
      position: relative;
      z-index: 2;
      font-size: 28rpx;
      color: #000;
      text-align: center;

      text+text {
        color: #EB3B3B;

      }

      image {
        position: absolute;
        height: 44rpx;
        width: 176rpx;
        left: 0;
        top: 0;
        z-index: -1;
      }
    }

    .house-more {
      font-size: 24rpx;
      color: #666;
      font-weight: 500;

      image {
        width: 24rpx;
        height: 20rpx;
        margin-left: 10rpx;
        position: relative;
      }
    }

    .rank-desc {
      color: #666;
      font-size: 24rpx;
      font-weight: 500;
    }
  }

  .rank-icon {
    width: 48rpx;
    height: 50rpx;
    position: absolute;
    left: 0;
    top: -10rpx;
  }
</style>